<template>
    <div class="conBox"   @click="jumpFun($event)">
      <ul class="table-header">
        <li>
          <span>工程类别</span>
          <span>项目数量</span>
          <span>钻孔数量</span>
        </li>
      </ul>
      <vue3-seamless-scroll
        hover="true"
        hover-stop="true"
        :list="list"
        :step="0.2"
        class="seamless-warp"
      
      >
        <ul class="list">
          <li class="devicelistitem" v-for="(item, index) in list" :key="index">
            <span :title="item.workCategory">{{ item.workCategory }}</span>
            <span :title="item.projectNum" style="color:#46FFFF">{{ item.projectNum }}</span>
            <span :title="item.drillNum" style="color:#46FFFF">{{ item.drillNum }}</span>
          </li>
        </ul>
      </vue3-seamless-scroll>
    </div>
  </template>
  <script setup name="Index">
  const props = defineProps({
    list: {
      required: true,
      type: Array,
      default: [],
    },
  });
  const { list } = toRefs(props);

  console.log(list,'shuju ');
  </script>
  
  <style lang="scss" scoped>
  .conBox {
    width: 100%;
    overflow: hidden;
    display: flex;
    color: #e6f4fd;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    flex-direction: column;
    box-sizing: border-box;
    .seamless-warp {
      height: 180px;
      overflow: hidden;
      cursor: pointer;
      .list {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        .devicelistitem {
            width: 100%;
          display: flex;
          // justify-content: flex-end;
          align-items: center;
          height: 30px;
          // width: 500px;
          .devicelistitem-result {
            color: #46ffff;
          }
          span {
            // flex: 1;
            display: inline-block;
            width: 33%;
            display: block;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #d7def5;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    &-table {
      // height: 130px;
      margin-top: 23px;
      overflow: hidden;
    }
    .el-table .el-table__header-wrapper th {
      background-color: none;
      color: #fff;
    }
    .el-table .el-table__cell {
      height: 15px !important;
    }
    .table-header {
      display: flex;
      margin: 0;
      padding: 0;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #475adb;
      // background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
      background: transparent;
      // justify-content: space-around;
      li {
        width: 100%;
        height: 30px;
        // margin: 0 15px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span {
          display: inline-block;
          width: 33%;
          text-align: center;
        //   margin-left: 26px;
        }
        span:nth-child(1) {
          margin-left: 0;
        }
      }
    }
   
  }
  </style>
  